<template>
	<div>
		<el-steps class="step-text" style="max-width: 600px;font-size:14px;" :active="state.step" align-center>
			<el-step title="申诉类型" :icon="Operation" />
			<el-step title="填写信息" :icon="Edit" />
			<el-step title="申诉成功" :icon="Select" />
		</el-steps>
		<div class="step-con">
			<div class="step1" v-if="state.step === 1">

				<div class="s1-li" v-for="item in state.typeList" :key="item.id" @click="chooseType(item.id)">
					{{ item.text }}
				</div>
			</div>
			<div class="step2" v-if="state.step === 2">
				<el-form :model="state.form" label-width="auto" style="max-width: 600px">
					<el-row>
						<el-col :span="8" class="left"><span></span>申诉类型：</el-col>
						<el-col :span="16"> <el-input v-model="state.typeText" disabled /></el-col>
					</el-row>
					<el-row>
						<el-col :span="8" class="left"><span></span>申诉问题：</el-col>
						<el-col :span="16" class="left auto">
							<el-input v-model="state.form.suggestion" type="textarea" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8" class="left"><span></span>联系姓名：</el-col>
						<el-col :span="16">
							<el-input v-model="state.form.name" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8" class="left"><span></span>联系邮箱：</el-col>
						<el-col :span="16">
							<el-input v-model="state.form.email" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8" class="left"><span></span>联系电话：</el-col>
						<el-col :span="16">
							<el-input v-model="state.form.phone" />
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8" class="left"><span></span>图片验证码：</el-col>
						<el-col :span="7" class="left">
							<el-input v-model="state.form.imgCode" /></el-col>
						<el-col :span="9" class="left img-code" @click="getImgCodeData()">
							<img :src="imgCode" alt="">
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8" class="left"><span></span>手机验证码：</el-col>
						<el-col :span="7"><el-input v-model="state.form.code" /></el-col>
						<el-col :span="9" class="get-code"><el-button @click="getCodeFun()">{{ msg
								}}</el-button></el-col>
					</el-row>
				</el-form>
			</div>
			<div class="step3" v-if="state.step === 3">
				<div class="title">恭喜您，申诉成功，系统会进行审批，结果会以邮件或电话方式通知，请留意相关信息！</div>
				<div class="li"><span>申诉类型：</span>
					<div>{{ state.typeText }}</div>
				</div>
				<div class="li"><span>申诉问题：</span>
					<div>{{ state.form.suggestion }}</div>
				</div>
				<div class="li"><span>联系人姓名：</span>
					<div>{{ state.form.name }}</div>
				</div>
				<div class="li"><span>联系人电话：</span>
					<div>{{ state.form.phone }}</div>
				</div>
				<div class="li"><span>联系人邮箱：</span>
					<div>{{ state.form.email }}</div>
				</div>
				<div class="bottom-btn"><el-button type="primary" @click="emit('tabLogin', 'account')">确定</el-button></div>
			</div>
		</div>
		<el-row justify="center">
			<el-button @click="prevStep()" v-if="state.step === 2">上一步</el-button>
			<!-- <el-button @click="nextStep()" v-if="state.step===1">下一步</el-button> -->
			<el-button type="primary" @click="submitAppeal()" v-if="state.step === 2">提交</el-button>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="appeal">
import { reactive, ref } from 'vue';
const emit = defineEmits(['tabLogin']);


function toLoginTab() {
	alert('确定')
}
import { Edit, Operation, Select } from '@element-plus/icons-vue'
import {
	verifyPhone,
	verifyEmail,

} from '/@/utils/toolsValidate';
import { ElMessage } from 'element-plus';
import { useLoginApi } from '/@/api/login';
import { useIndexApi } from '/@/api/index';
const state = reactive({
	step: 1,
	typeText: '',
	typeList: [
		{ id: 1, text: '店铺被占用' },
		{ id: 2, text: '资料申报失败' },
		{ id: 3, text: '活动物料未收到' },
		{ id: 4, text: '其他申诉问题' },
	],
	form: {
		type: 0,
		suggestion: '',
		name: '',
		email: '',
		phone: '',
		code: '',
		imgCode: '',
		sessionId: '',
	},
	loading: {
		signIn: false,
	},
});
function chooseType(i: number) {
	state.form.type = i;
	state.typeText = state.typeList[i - 1].text;
	stepChange(2)
}
function prevStep() {
	state.step = 1;
}
const imgCode = ref('');
async function getImgCodeData() {
	const res = await useLoginApi().getImgCode({});
	if (res) {
		imgCode.value = res.data.base64
		state.form.sessionId = res.data.id;
	}

}
getImgCodeData();

const msg = ref('获取验证码');
const issending = ref(false);

async function getCodeFun() {
	if (issending.value) {
		return false;
	}

	if (!verifyPhone(state.form.phone)) {
		ElMessage('请输入正确的联系人电话')
		return false;
	}
	if (!state.form.imgCode) {
		ElMessage('请输入正确的图片验证码')
		return false;
	}
	issending.value = true;
	let t = 60;
	const res = await useLoginApi().getSendCode({
		"phone": state.form.phone,
		"sessionId": state.form.sessionId,
		"code": state.form.imgCode,
		"type": "appeal",
	});
	let timer = null;
	function waitTime() {
		clearInterval(timer);
		timer = setInterval(() => {
			t--;
			if (t <= 0) {
				clearInterval(timer);
				timer = null;
				msg.value = '获取验证码';
				t = 0;
				issending.value = false;
			} else {
				msg.value = t + 's后可以重新获取';
			}
		}, 1000);
	}
	if (res) {
		ElMessage('发送成功')
		waitTime();
		issending.value = true;
	} else {
		issending.value = false;
	}

}
async function submitAppeal() {

	if (!state.form.suggestion) {
		ElMessage('请输入问题')
		return false;
	}
	if (!state.form.name) {
		ElMessage('请输入联系人姓名')
		return false;
	}
	if (!verifyEmail(state.form.email)) {
		ElMessage('请输入正确的联系人邮箱')
		return false;
	}
	if (!verifyPhone(state.form.phone)) {
		ElMessage('请输入正确的联系人电话')
		return false;
	}
	if (!state.form.imgCode) {
		ElMessage('请输入正确的图片验证码')
		return false;
	}
	if (!state.form.code) {
		ElMessage('请输入正确的手机验证码')
		return false;
	}

	const res = await useIndexApi().appeal(state.form);
	if (res) {
		state.step = 3;
	}

}
function stepChange(i: number) {
	state.step = i;
}
// 登录

</script>

<style scoped lang="scss">
.el-step__icon-inner {
	font-size: 14px !important;
}

.step-con .step1,
.step-con .step2 {
	height: 150px;
	overflow: auto;
	margin: 20px auto;
	box-sizing: border-box;
	padding: 0 5px;
}

.s1-li {
	height: 32px;
	line-height: 32px;
	font-size: 16px;
	color: #398ee5;
	text-align: center;
	cursor: pointer;
}

.step-text {
	padding-top: 20px;
}

@media screen and (max-width: 576px) {
	.step-con .step2 {
		height: auto;
	}
}

.left {
	line-height: 40px;
	height: 40px;
	margin-bottom: 10px;

	&.auto {
		height: auto
	}
}

.get-code,
.img-code {
	justify-content: flex-end;
	width: 100%;
	display: flex;
}

.step-con .step3 {
	height: 250px;
	overflow: auto;
	margin: 15px auto;

	.bottom-btn {
		width: 100%;
		padding-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		height: 60px;
		line-height: 24px;
		text-align: center;
	}

	.li {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 60%;
		min-width: 270px;
		margin: 0 auto;

		span {
			width: 100px;
			height: 24px;
			line-height: 24px;
		}

		div {
			width: calc(100% - 100px);
			height: 24px;
			line-height: 24px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
